Description

Lego Mosaic Maker is a program I wrote in 2022 that has the user upload a photo, and then through a series of steps lets the user know how to build a lego mosaic that approximates their photo. Features include cropping your original image, choosing what Lego color pallette you want to use (currently available colors, grayscale colors, or all colors ever produced by Lego), and choosing the resolution of your Lego Mosaic from a few available choices (32, 48, 64, or 96 pixels wide and tall). The reason behind having only some resolutions available is because Lego makes base plate pieces in sizes 32x32 and 48x48, so a 64x64 resolution would be four 32x32 base plates and a 96x96 resolution would be four 48x48 base plates or nine 32x32 baseplates.

Once you have specified all of the qualities you want in your Lego Mosaic, the app will generate a mosaic with an image preview, show a part list with how much quantity you need of each Lego brick color to build the mosaic, and step-by-step instructions on how to build the mosaic in subsections, with final instructions on how to arrange the sections to complete the mosaic.

The website works on both mobile and desktop, although it is easier to screenshot the build instructions on Desktop as opposed to mobile. If you use it on mobile, take care to upload small files (iPhones have an option to upload an image as a small file size for example) to have it generate the mosaic in under a second, otherwise it can take longer if your image has a particularly large resolution.

To build your lego mosaic in real life, all current parts are available at the "pick a brick" section on the website Lego.com, while colors no longer in production are available on websites such as bricklink.com .

Building The Mosaic

I have used my Lego Mosaic Maker to design and create real Lego mosaics, my most notable project being my custom mosaic of Rice University's Lovett Hall. The mosaic measures 96 by 96 pixels wide, for a total of 9,216 Lego 1x1 pieces. Underneath the mosaic's top layer are multiple layers of large Lego plate pieces holding the mosaic together.

Above: Building the Lego Mosaic of Lovett Hall based on my program's blueprint

Inspiration

Lego.com created a Lego set to build a mosaic of your face based on an app they made that can convert a picture into a lego mosaic, but there are a few improvements that can be made: it is a grayscale mosaic that doesn't have an option to use any colors besides yellow, and it is also fixed to a 48x48 resolution.

I have always been interested in building Lego mosaics, and while I used the official Lego Mosaic set to before for a project I wanted to be able to build full-color mosaics with fine details. I saw that there were some Lego Mosaic makers online, but most of them require that you pay money for the instructions, and I was more interested in a free mosaic maker. However, there was one really amazing free mosaic website created by Deb Banerji called Lego Art Remix, at lego-art-remix.com . While I did not look at any of his source code, I watched a 40 minute lecture from him at BrickCon 2021 where he presented the abstract methods he used to calculate what the Lego Mosaic should be like based on source photos, and I used these ideas as a guide when creating my own mosaic program.

Skills I've Learned

Through this project, I learned how to process an image that a user uploads, and represent an image as an abstract class to edit the pixels within it and re-display it. I also learned the basics about the field of color theory, calculating the distance between two colors using the distance on the red-green-blue plane to determine the closest lego-official colors to each pixel, and I also learned how to average an area of pixels to one color by adding up all of the rgb values and dividing them by the number of pixels. This project was also one of the first websites I designed to work on mobile, so I also learned how to use css layouts such as flexboxes to have the page display narrowly on phones but also wide on computers to utilize the space.

Desktop Screenshots

Mobile Screenshots